import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Card, message, Cascader } from 'antd';

const FormItem = Form.Item;

@connect(({ general, loading }) => ({
  general,
  loading: loading.models.general,
}))
@Form.create()
export default class AddCommunity extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'general/getProvincesList',
      payload: {
        maxLevel:3
      },
    });
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values ofo form: ', values);
        this.props.dispatch({
          type: 'community/addCommunity',
          payload: {
            communityName: values.communityName,
            countyId: Number(values.cityName[values.cityName.length - 1]),
            streetName: values.streetName,
          },
          callback: () => {
            message.success('SUCCESS');
            this.props.form.resetFields();
            this.props.closeModal();
          },
        });
      }
    });
  }
  render() {
    const { general: { provincesList } } = this.props;
    console.log(provincesList);
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    return (
      <Card bordered={false}>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout}
            label="小区"
          >
            {getFieldDecorator('communityName', {
              rules: [
                {
                  required: true, message: '请输入小区',
                }],
            })(
              <Input placeholder="请输入小区" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="城市"
          >
            {getFieldDecorator('cityName', {
              rules: [{
                required: true, message: '请选择城市',
              }],
            })(
              <Cascader
                size="large"
                style={{ width: '100%' }}
                options={provincesList}
                placeholder="请选择城市"
              />)}
          </FormItem>


          {/*<FormItem*/}
            {/*{...formItemLayout}*/}
            {/*label="街道"*/}
          {/*>*/}
            {/*{getFieldDecorator('streetName', {*/}
              {/*rules: [{*/}
                {/*required: true, message: '请输入街道',*/}
              {/*}],*/}
            {/*})(*/}
              {/*<Input placeholder="请输入街道" />*/}
              {/*)}*/}
          {/*</FormItem>*/}

          <FormItem {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">保存</Button>
          </FormItem>
        </Form>
      </Card>
    );
  }
}
